<template>
  <div id="app">
    <div class="container">
      <h1 style="text-align: center; color: red">LOL皮肤商品货架</h1>
      <br />
      <Table :columns="columns1" :data="data1">
        <template slot-scope="{ row }" slot="picture">
          <img id="skin_img" :src="row.picture" alt="" />
        </template>
      </Table>
    </div>
     <div>
    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">Text</Button>
    <br /><br />
    <Button type="info">Info</Button>
    <Button type="success">Success</Button>
    <Button type="warning">Warning</Button>
    <Button type="error">Error</Button>
  </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      columns1: [
        {
          title: "序号",
          key: "num",
          type: "index",
        },
        {
          title: "英雄名称",
          key: "name",
        },
        {
          title: "皮肤名称",
          key: "skin",
        },
        {
          title: "皮肤图片",
          key: "picture",
          slot: "picture"
        },
        {
          title: "皮肤单价",
          key: "price",
        },
        {
          title: "库存数量",
          key: "store",
        },
        {
          title: "操作",
          key: "operation"
        }
      ],
      data1: [
        {
          name: "蛮王",
          skin: "蛮王得皮肤",
          picture: "https://game.gtimg.cn/images/daoju/app/lol/big/1-23-9.jpg",
          price: "￥100",
          store: "1999",
        },
        {
          name: "赵兴",
          skin: "赵兴的皮肤",
          picture: "https://game.gtimg.cn/images/daoju/app/lol/big/20170315_0_5755.jpg",
          price: "￥110",
          store: "2999",
        },
        {
          name: "剑圣",
          skin: "剑圣的皮肤",
          picture: "https://game.gtimg.cn/images/daoju/app/lol/big/1-11-9.jpg",
          price: "￥120",
          store: "3999",
        },
        {
          name: "皇子",
          skin: "皇子的皮肤",
          picture: "https://game.gtimg.cn/images/daoju/app/lol/big/1-59-9.jpg",
          price: "￥130",
          store: "4999",
        },
      ],
    };
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.container {
  margin: 0px auto;
  width: 80%;
  height: 50%;
}
#skin_img {
  width:50px;
  height: 50px;
}
</style>
